<template lang="jade">
#account-binding
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 账号绑定
  .seperate
  div(v-if="hasBinded && user")
    .form-title #[i.icon-fontello.demo-icon.unlib-certificates] {{this.pageTitle}}
    form
      .form-item.weui-flex {{user.rdid}}
      .form-item.weui-flex
        input.weui-flex__item(type='password', placeholder='读者密码', v-model='password', name='reader-password')
      .status-warning 温馨提示：此绑定功能仅限于联合图书馆及其分管的读者使用。
      button.weui-btn.weui-btn_warn(@click.prevent.stop='unbind') 解除绑定
    //- form
      .form-item.weui-flex
        input.weui-flex__item(type='text', placeholder='读者账号', v-model='user.rdid', name='reader-account', disabled)
      .form-item.weui-flex
        input.weui-flex__item(type='password', placeholder='读者密码', v-model='password', name='reader-password')
      .status-warning 温馨提示：此绑定功能仅限于联合图书馆及其分管的读者使用。
      button.btn-blue.weui-btn.weui-btn_primary(@click.prevent.stop='bind') 开始绑定
  .weui-loadmore.weui-loadmore_line(v-else)
    span.weui-loadmore__tips 信息获取失败
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import api from '../../api-new'

export default {
  data () {
    return {
      password: '',
      hasBinded: true
    }
  },
  computed: {
    pageTitle () {
      return this.hasBinded ? '您已绑定读者账号' : '读者账号绑定'
    },
    ...mapGetters({
      'user': 'userInfo'
    })
  },
  created () {
    // this.hasBinded = window.localStorage.getItem('binded') === 'true'
    // const openid = this.$cookie.get('bind')
    // console.log(openid)
    // this.hasBinded = openid && openid.length > 0
  },
  methods: {
    // bind () {
    //   const uid = this.$cookie.get('uid')
    //   if (!uid || uid.length === 0) return
    //   api.bind(uid, this.password).then((data) => {
    //     window.alert('绑定成功')
    //   })
    //   .catch(err => window.alert(err.message))
    // },
    unbind () {
      const uid = this.$cookie.get('uid')
      const wxid = this.$cookie.get('wxid')
      if (!wxid || wxid.length === 0) return

      this.$weui.toast.loading()
      api.unbind(uid, this.password, wxid).then((data) => {
        this.$weui.toast.ok('解绑成功')
        this.logout()
        this.$cookie.delete('uid')
        this.$router.replace('/')
      })
      .catch(err => window.alert(err.message))
    },
    ...mapActions([
      'logout'
    ])
  }
}
</script>

<style lang='scss' scoped>
  .form-title i {
    &:before {
      transform: scale(2);
      color: #0068d4;
    }
  }
</style>
